<template>
	<view class="content">
		<view class="address">
			<view :class="[radioValue==1?'none':'']" v-if="address!=''">
				<view class="add_titele">
					<text>{{address[0].FConsignee}}</text>
					<text>{{address[0].FPhone}}</text>
					<text class="">{{address[0].FPrCityArea}}{{address[0].FAddress}}</text>
				</view>
				<image class="right" src="http://minipos.posyun3721.com/image/marketing/right.png"></image>
			</view>
		</view>
		<view class="main">
			<view v-if="payId==0">
				<view class="goods" v-if="childType==0">
					<text class="title">{{goodsData.FTypeName}}</text>
					<view class="goods-content">
						<image :src="goodsData.FImages"></image>
						<view class="goods-v">
							<view class="goods-box">
								<text style="width: 145rpx">商品名称：</text>
								<text style="width: 220rpx">{{goodsData.GoodsName}}</text>
							</view>
							<view class="goods-box">
								<text id="price1">¥{{goodsData.FValue}}</text>
								<text id="price">原价:¥{{goodsData.FPosPrice}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goods" v-else>
					<text class="title">{{id==0?goodsData.FTypeName:(id==1?'商品秒杀':'商品砍价')}}</text>
					<view class="goods-content">
						<image :src="[id==0?goodsData.FImages:goodsData.Img]" mode="aspectFit"></image>
						<view class="goods-v">
							<view class="goods-box">
								<text>商品名称：</text>
								<text>{{id==0?goodsData.FName:goodsData.Name}}</text>
							</view>
							<view class="goods-box">
								<text id="price1">¥{{id==0?goodsData.FValue:goodsData.AcPrice}}</text>
								<text id="price">原价:¥{{id==0?goodsData.FPosPrice:goodsData.Price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="goods">
					<text class="title"></text>
					<view class="goods-content">
						<image :src="historyGoods.PicUrl" mode="aspectFit"></image>
						<view class="goods-v">
							<view class="goods-box">
								<text>商品名称：</text>
								<text>{{historyGoods.Name}}</text>
							</view>
							<view class="goods-box">
								<text style="line-height:80rpx;margin-right:20rpx">实付款:</text>
								<text id="price1">¥{{historyGoods.Price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="payId!=5">
				<text class="fl">配送方式</text>
				<!-- <image class="fr" src="/image/Marketing/right.png"></image> -->
				<!-- <text class="fr">请选择运输方式</text>       -->
				<view class="fr" style="margin-right: 20rpx">
					<radio-group class="radio-group" @change="radioChange">
						<radio class="radio" value="0" style="margin-right: 20rpx">
							<text class="">快递运输</text>
						</radio>
						<radio class="radio" value="1">
							<text class="">自取</text>
						</radio>
					</radio-group>
				</view>
			</view>
			<view class="box" v-if="payId!=5">
				<text class="fl">支付方式</text>
				<view class="fr" style="margin-right: 20rpx">
					<radio-group class="radio-group" @change="amountChange">
						<radio class="radio" value="2" style="margin-right: 20rpx">
							<text class="fl">会员卡</text>
							<text class="fl" style="color: #FFA54F;">(￥{{amount}})</text>
						</radio>
						<radio class="radio" value="1">
							<text class="">微信</text>
						</radio>
					</radio-group>
				</view>
			</view>
			<view class="box" v-if="payId==1">
				<text>订单号：{{tradeno}}</text>
			</view>

			<view class="box">
				<text class="fl">发票信息</text>
				<!-- <image class="fr" src="/image/Marketing/right.png"></image> -->
				<text class="fr" style="margin-right: 20rpx">个人 商品明细</text>
			</view>
			<!-- <view class=" box "> -->
			<textarea class="box-input" type="text" maxlength="45" placeholder="订单备注(限45字，请勿填写发票、配送方面信息)"
				bindfocus="onTextarea"></textarea>
			<!-- </view> -->
			<view class="pay fr" v-if="payId!=5">
				<button class="fr" @click="onOrder">提交订单</button>
				<view class="fr" style="width: 300rpx;">
					<text class="payT fl">实付款:</text>
					<text v-if="childType==0">¥{{goodsData.FValue}}</text>
					<text v-else>¥{{goodsData.AcPrice}}</text>
				</view>
			</view>
			<view class="can">
				<canvas v-if="payId==5" class="canvas1" canvas-id="qrcode" />
				<canvas v-if="payId==5" class="canvas2" canvas-id="barcode" />
				<text v-if="payId==5" :class="chapter [chapter==1?'':'none']">已核销</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '', //活动类型id
				groupId: '', //活动id
				goodsData: '', //活动详情
				addressId: '', //地址id
				AcChild: 0, //
				childType: 0, //秒杀(0=>从活动详情进来的，1=>从我的活动里面进来) 砍价(0=>从活动详情进来的，1=>从我的活动里面进来)
				address: '',
				radioValue: '', //配送方式
				amountValue: '', //支付方式
				payId: 0, //
				payFitemid: '', //
				historyGoods: '',
				tradeno: '', //
				chapter: 0, //是否已核销 0=>未 1=>已
				distributor: '', //分销人员的id

				amount: '', //会员卡金额
				payTpye: true, //
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//console.log(options);
			uni.setStorageSync('CurrentPage', options)
			let member = uni.getStorageSync('memberdata');
			if(member==""){
				this.amount=0;
			}else{
			this.amount = member[0].Amount;
			}
			if (options.id == 5) { //订单中进入
				this.payId = options.id;
				this.payFitemid = options.fitemid;
				this.onOrderQuery();
			} else {
				let data = JSON.parse(options.goodsData);
				if (options) {
					if (options.AcChild) { //加入子拼团的支付
						this.AcChild = options.AcChild; //加入子拼团
						this.childId = options.childId; //子拼团id
					}
					let groupId = '';
					if (options.id == 0) { //拼团
						groupId = data.FItemID;
						this.distributor = options.distributor; //分销人员的id
					} else if (options.id == 1) { //秒杀
						if (options.childType == 1) {
							groupId = data.Acid;
							this.distributor = options.distributor; //分销人员的id
						} else {
							groupId = data.FItemID;
						}
					} else if (options.id == 2) { //砍价
						if (options.childType == 1) {
							groupId = data.Acid;
							this.distributor = options.distributor; //分销人员的id
						} else {
							groupId = data.FItemID;
						}
					}
					this.id = options.id; //活动类型id
					this.groupId = groupId; //活动id
					this.goodsData = data; //活动详情
					this.addressId = options.addressId; //地址id
					this.childId = options.childId; //子砍价id   
					this.childType = options.childType;
				}
			}
		},
		methods: {
			//支付
			onOrder: async function() {
				var self = this;

				//一次性订阅
				// wx.requestSubscribeMessage({
				//   tmplIds: ['7zJPgV9v90j6Dm8TLJcwE_lgpLbrqT8tjYyvcYLe_Oo'],
				//   success:(res)=>{
				//     //console.log(res);
				//     if (res['7zJPgV9v90j6Dm8TLJcwE_lgpLbrqT8tjYyvcYLe_Oo'] === 'accept') {
				//       wx.showToast({
				//         title: '订阅成功!',
				//         duration: 1000,
				//       })
				//     }
				//   },
				//   fail:(error)=>{
				//     //console.log(error);
				//     wx.showModal({
				//       title: '温馨提示',
				//       content: '您已拒绝授权，将无法在微信中收到拼团通知！',
				//       showCancel: false,
				//       success (res) {         
				//       }
				//     })
				//   }
				// })

				if (this.payTpye == false) {
					//console.log('11')
					return;
				} else {
					this.payTpye = false;
				}
				let groupid = this.groupId,
					url = '',
					data = {};
				if (this.radioValue == 0) {
					let add = await this.Address();
					//console.log(add);
				}
				
				if (this.amountValue == '') {
					uni.showModal({
						title: '提示',
						content: '请选择支付方式',
						success: res => {
							self.payTpye = true;
						}
					});
					return;
				}
				if (this.radioValue != '') {
					data = {
						acid: groupid, //活动id
						addressid: this.addressId, //地址id
						rectype: this.radioValue, //送达方式
						paytype: this.amountValue, //1微信 2会员卡余额
					};
				} else {
					uni.showModal({
						title: '提示',
						content: '请选择送达方式',
						success: res => {
							self.payTpye = true;
						}
					});
					return;
				}
				if (this.id == 0) {
					//拼团
					if (this.AcChild == 1) {
						url = 'Sale/GroupJoinPay';
						data.childid = this.childId;
					} else {
						url = 'Sale/GroupCreatePay';
						data.prowxid = this.distributor;
					}
				} else if (this.id == 1) {
					//秒杀
					url = 'Sale/SecGoodsPay';
					let gid = this.goodsData.FRangeExt != undefined ? this.goodsData.FRangeExt : this.goodsData
						.GoodsId;
					data.goodsid = gid;
				} else if (this.id == 2) {
					//砍价
					url = 'Sale/CutPricePay';
					data.childid = this.childId;
				}
				
				data.memberId = uni.getStorageSync('memberdata')[0].MemberId;
				//console.log(this.data.payTpye)
				// self.add();
				this.$util.util(url, data,'POST').then(res => {
					//console.log(res);
					if (data.paytype == 2) {
						uni.showToast({
							title: "会员卡支付成功!",
							icon: 'none',
							duration: 3000,
							success: res => {
								self.add();
							}
						})
					} else {
						let data = res.data.respData || res.data;
						uni.requestPayment({
							timeStamp: data.payTimeStamp || data.timeStamp,
							nonceStr: data.paynonceStr || data.nonceStr,
							package: data.payPackage,
							signType: data.paySignType || data.signType,
							paySign: data.paySign,
							success: res => {
								//console.log(res);
								setTimeout(() => {
									uni.showToast({
										title: "支付成功!",
										icon: 'none',
										duration: 3000,
										success: res => {
											self.add();
										}
									})
								}, 200);
							},
							fail: error => {
								//console.log('error', error)
								self.payTpye = true;
								if (error.errMsg == 'requestPayment:fail cancel') {
									uni.showToast({
										title: "您已取消支付!",
										icon: 'none',
										duration: 2000,
									})
								} else if (error.errMsg ==
									'requestPayment:fail (detail message)') {
									uni.showToast({
										title: "支付失败!",
										icon: 'none',
										duration: 2000,
									})
								}
							},
							complete: () => {
								//console.log('11111');
							}
						})
					}
				}).catch(error => {
					//console.log(error)
					if (error.errMsg == 'request:fail timeout') {
						let currentData = uni.getStorageSync('CurrentPage');
						this.onLoad(currentData);
					} else {
						uni.showToast({
							title: error.data.data,
							icon: 'none',
							duration: 3000
						})
					}
				});
			},
			//支付成功后，去我的活动界面
			add: function() {
				let self = this;
				uni.showLoading({
					title: '支付中，请稍后',
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/Marketing/aboutUs/order/order?id=' + self.id,
					})
					uni.hideLoading()
				}, 3000)
			},
			//获取收货地址
			Address: function() {
				let self = this;
				return new Promise((resolve, reject) => {
					this.$util.util('WxUserInfo/GetAddress', {}, 'POST').then(res => {
						//console.log(res);
						// if (res.data.data != '[]') {
						// let list = JSON.parse(res.data.data);
						self.address= res;
						self.addressId= res[0].FItemID;
						//console.log('地址', this.data.address);
						resolve(1);
					}).catch(error => {
						//console.log(error);
						uni.showModal({
							title: '提示',
							content: '您还没有填写您的详细地址，请前往个人中心填写',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/Marketing/aboutUs/address/address?share=0',
									})
								}
							}
						})
					});
				})

			},
			//送达方式
			radioChange: function(e) {
				//console.log(e.detail.value);
				this.radioValue = e.detail.value;
			},
			//支付方式
			amountChange(e) {
				this.amountValue = e.detail.value;
			},
			//订单查询
			onOrderQuery: function() {
				this.$util.util('Sale/OrderDtl', {
					itemid: this.payFitemid
				}).then(res => {
					// if(res.data.msg=="success"){
					// let data = res.data.data;
					// data = JSON.parse(data);
					//console.log('onOrder',res);
						this.historyGoods= res.Goods[0];
						this.tradeno= res.FTradeno;
					this.scanCode(res);
				});
			},
			scanCode: function(goods) {
				let data = {
					uid: goods.FWxId,
					actype: goods.FAcType,
					acid: goods.FAcId,
				}
				if (goods.FAcType == 2) {
					data.goodsid = goods.FGoodsId;
				} else {
					data.childid = goods.FChildId;
				}
				this.$util.util('Sale/BillQrCodeString', data).then(res => {
					//console.log(res);
					let qrcode = res.value;
					wxbarcode.qrcode('qrcode', qrcode, 450, 450);
					wxbarcode.barcode('barcode', qrcode, 450, 150);
					if (res.msg != '') {
							this.chapter= 1;
					}
				});
			},
		}
	}
</script>

<style lang='scss'>
	@import url("../../../../common/app.wxss");
	
	.content {
		width: 100%;
		height: auto;
	}

	.main {
		width: 100%;
		height: auto;
		float: left;
	}

	.box {
		width: 100%;
		height: 38rpx;
		padding: 26rpx 0;
		border-bottom: 2rpx solid #EBEBEB;
	}

	/* .box:first-of-type{
  border-bottom: 20rpx solid #EBEBEB; 
} */
	.box-input {
		border-bottom: 20rpx solid #EBEBEB;
		border-top: 20rpx solid #EBEBEB;
		width: 90%;
		padding: 0 5%;
		height: 150rpx;
		line-height: 50rpx
	}

	.box text {
		color: #333;
		font-size: 28rpx;
		line-height: 42rpx;
		display: block;
	}

	.box image {
		width: 24rpx;
		height: 24rpx;
		display: block;
		padding: 8rpx 0;
		margin: 0 20rpx;
	}

	.box input {
		width: 100%;
		height: auto;
		line-height: 32rpx;
		color: #333;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.pay {
		height: 100rpx;
		color: red;
		position: fixed;
		bottom: 0rpx;
		right: 0;
		width: 100%;
		border-top: 10rpx solid #EBEBEB;
	}

	.pay text {
		line-height: 100rpx;
		font-size: 28rpx;
		display: block;
		margin: 0 20rpx;
	}

	.pay button {
		width: 330rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0;
		margin: 0;
		color: #fff;
		font-size: 28rpx;
		background: red;
		border-radius: 0;
	}

	.payT {
		color: #000
	}

	.goods {
		width: 99%;
		height: auto;
		border-bottom: 20rpx solid #EBEBEB;
	}

	.title {
		margin-left: 20rpx;
		line-height: 42rpx;
		color: #333;
		font-size: 32rpx;
		display: block;
	}

	.goods-content {
		width: 100%;
		height: 250rpx;
		border: 2rpx solid #EBEBEB;
		background: #f7f7f7;
	}

	.goods-content image {
		width: 350rpx;
		height: 250rpx;
		display: block;
		float: left;
	}

	.goods-v {
		display: block;
		float: left;
	}

	.goods-box {
		margin: 30rpx 0 20rpx 20rpx;
		width: 365rpx;
		height: 50rpx;
	}

	.goods-box text {
		color: #333;
		font-size: 28rpx;
		line-height: 42rpx;
		display: block;
		float: left;
	}

	#price {
		color: #515151;
		font-size: 28rpx;
		line-height: 38rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
		text-decoration: line-through;
	}

	#price1 {
		font-size: 46rpx;
		line-height: 80rpx;
		color: #FF2741;
	}

	.address {
		width: 100%;
		height: auto;
		padding: 10rpx 0;
		border-bottom: 4rpx dashed blue;
		float: left;
		margin-bottom: 20rpx;
	}

	.add_titele {
		width: 500rpx;
		height: auto;
		font-size: 32rpx;
		color: #000;
		margin-left: 50rpx;
		float: left;
	}

	.add_titele>text {
		line-height: 50rpx;
		margin-bottom: 10rpx;
	}

	.add_titele>text:nth-child(1) {
		font-size: 38rpx;
		margin-right: 20rpx;
	}

	.add_titele>text:nth-child(3) {
		width: 100%;
		display: block;
	}

	.right {
		width: 32rpx;
		height: 32rpx;
		display: block;
		float: right;
		margin-right: 30rpx;
		margin-top: 43rpx;
	}

	.canvas1 {
		width: 450rpx;
		height: 450rpx;
		margin: 0 auto;
	}

	.canvas2 {
		width: 450rpx;
		height: 150rpx;
		margin: 0 auto;
		padding-bottom: 50rpx;
	}

	.chapter {
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		border: 12rpx solid red;
		text-align: center;
		color: red;
		font-size: 46rpx;
		font-weight: bold;
		line-height: 250rpx;
		position: absolute;
		bottom: 108rpx;
		left: 40rpx;
		z-index: 100000;
	}

	.can {
		width: 100%;
		height: auto;
		position: relative;
	}

	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video {
		-webkit-box-sizing: initial;
	}
</style>
